 <template>
  <div id="advertising-rank">
    <div class="search-box">
      <Row type="flex">
        <Row type="flex" justify="start" class="search-item-left">
          <Col class="search-item">
            <span class="search-label">广告位:</span>
            <Select v-model="searchObj.adPlaceId" @on-change="selectAdPlaceId">
              <Option
                v-for="item in adPlaceList"
                :value="item.adPlaceId"
                :key="item.adPlaceId"
              >{{ item.adPlaceName }}</Option>
            </Select>
          </Col>
        </Row>
      </Row>
    </div>
    <Table stripe class="table-list" :columns="columns" :data="tableData" :loading="loading">
      <!-- 广告位类型 -->
      <template slot-scope="{ row }" slot="adPlaceType">
        <span>{{ row.adPlaceType===0?"Banner":row.adPlaceType===1?"启动页全屏":row.adPlaceType===2?"通栏":"" }}</span>
      </template>
      <!-- 展示时间 -->
      <template slot-scope="{ row }" slot="beginAt">
        <span>{{ row.beginAt}} - {{ row.endAt}}</span>
      </template>
      <template slot-scope="{ row }" slot="action">
        <i
          class="iconsys icondetail"
          title="查看"
          v-if="hasPermission('moms:globalsetting:addetail')"
          @click="viewDetails(row)"
        ></i>
        <i
          class="iconsys iconedit"
          title="编辑"
          v-if="hasPermission('moms:globalsetting:adupdate')"
          @click="advertisingEdit(row)"
        ></i>
        <Poptip confirm :title="'你确定要上架吗？'" transfer width="150" @on-ok="doStatus(row, 1)">
          <i
            class="iconsys iconshangjia"
            title="上架"
            v-if="hasPermission('moms:globalsetting:adstatusupdate') && (row.adStatus === 0 || row.adStatus === 2)"
          ></i>
        </Poptip>
        <Poptip confirm :title="'你确定要下架吗？'" transfer width="150" @on-ok="doStatus(row, 2)">
          <i
            class="iconsys iconxiajia"
            title="下架"
            v-if="hasPermission('moms:globalsetting:adstatusupdate') && row.adStatus === 1"
          ></i>
        </Poptip>
        <Poptip
          v-if="row.adSeq!==1" width="150"
          confirm
          :title="'你确定要上移吗？'"
          transfer
          @on-ok="doSeqChange(row,-1)"
        >
          <i class="iconsys iconxiangshang" title="上移"></i>
        </Poptip>
        <Poptip v-if="row.adSeq!==adtotal" width="150" confirm :title="'你确定要下移吗？'" transfer @on-ok="doSeqChange(row,1)">
          <i class="iconsys iconxiangxia" title="下移"></i>
        </Poptip>
      </template>
    </Table>
    <Row type="flex" justify="end" style="padding: 20px">
      <Page
        :total="adtotal"
        :current.sync="searchObj.pageIndex"
        :page-size="searchObj.pageSize"
        @on-change="handlePage"
        @on-page-size-change="handlePageSize"
        show-sizer
        show-total
      />
    </Row>
  </div>
</template>
<script>
import { getadPlaceList, getadList, adStatusChange, adSeqChange } from '@/api/advertising/index'
export default {
  name: 'advertising_rank',
  data () {
    return {
      tableData: [],
      adtotal: 0,
      loading: false,
      // 广告位列表
      adPlaceList: [],
      columns: [
        {
          title: '序号',
          key: 'adSeq',
          width: 60,
          align: 'center'
        },
        {
          title: '广告ID',
          key: 'adNo',
          width: 80
        },
        {
          title: '广告名称',
          key: 'adName'
        },
        {
          title: '广告位',
          key: 'adPlaceName'
        },
        {
          title: '广告位类型',
          slot: 'adPlaceType'
        },
        {
          title: '展示时间',
          slot: 'beginAt'
        },
        {
          title: '创建人',
          key: 'creatorName'
        },
        {
          title: '创建时间',
          key: 'createAt'
        }
      ],
      searchObj: {
        adPlaceId: '', // 广告位id
        adName: '', // 广告名称
        compareBeginAt: '', // 展示时间起始
        compareEndAt: '', // 展示时间结束
        createAtStart: '', // 创建时间起始
        createAtEnd: '', // 创建时间结束
        creatorName: '', // 创建人名称
        pageIndex: 1,
        pageSize: 10
      }
    }
  },
  created () {
    this.getadPlaceList()
    if (
      this.hasPermission([
        'moms:globalsetting:addetail',
        'moms:globalsetting:adupdate',
        'moms:globalsetting:adstatusupdate'
      ])
    ) {
      this.columns.push({
        title: '操作',
        slot: 'action',
        width: '200'
      })
    }
  },
  watch: {
    $route (newRoute) {
      if (newRoute.name === 'advertising_rank') {
        this.doSearch()
      }
    }
  },
  methods: {
    // 查询广告位列表
    getadPlaceList () {
      this.loading = true
      getadPlaceList({
        merchantId: this.$store.state.user.merchantId, // 商户id
        channelId: '', // 渠道ID
        adPlaceType: '', // 广告位类型
        adPlaceName: '', // 广告位名称
        creatorName: '', // 创建人名称
        createAtStart: '', // 创建时间起始
        createAtEnd: '' // 创建时间结束
      })
        .then(res => {
          if (res.data.status === 200) {
            if (res.data.totalCount > 0) {
              this.adPlaceList = res.data.data
              this.searchObj.adPlaceId = res.data.data[0].adPlaceId // 广告位id
              this.doSearch()
            } else {
              this.loading = false
              this.adPlaceList = []
            }
          } else {
            this.loading = false
            this.$Message.error(`${res.data.error}`)
          }
        })
        .catch(error => {
          this.$Message.error(`${this.showError(error)}`)
        })
    },
    // 查询广告列表
    doSearch () {
      getadList({
        merchantId: this.$store.state.user.merchantId, // 商户id
        adPlaceId: this.searchObj.adPlaceId, // 广告位id
        adName: this.searchObj.adName, // 广告名称
        creatorName: this.searchObj.creatorName, // 创建人名称
        compareBeginAt: this.searchObj.compareBeginAt, // 展示时间起始
        compareEndAt: this.searchObj.compareEndAt, // 展示时间结束
        createAtStart: this.searchObj.createAtStart, // 创建时间起始
        createAtEnd: this.searchObj.createAtEnd, // 创建时间结束
        sortBy: 'adSeq', // 按照序号排序
        offset: this.searchObj.pageSize * (this.searchObj.pageIndex - 1),
        limit: this.searchObj.pageSize
      })
        .then(res => {
          this.loading = false
          if (res.data.status === 200) {
            if (res.data.totalCount > 0) {
              this.tableData = res.data.data
              this.adtotal = res.data.totalCount
            } else {
              this.tableData = []
              this.adtotal = 0
            }
          } else {
            this.$Message.error(`${res.data.error}`)
          }
        })
        .catch(error => {
          this.loading = false
          this.$Message.error(`${this.showError(error)}`)
        })
    },
    // 分页操作
    handlePage (val) {
      this.searchObj.pageIndex = val
      this.doSearch()
    },
    handlePageSize (val) {
      this.searchObj.pageSize = val
      this.searchObj.pageIndex = 1
      this.doSearch()
    },
    selectAdPlaceId () {
      this.searchObj.pageSize = 10
      this.searchObj.pageIndex = 1
      this.doSearch()
    },
    // 查看
    viewDetails (row) {
      this.$router.push({ name: 'advertising_detail', params: { id: row.adId, type: 2 } })
    },
    // 编辑
    advertisingEdit (row) {
      this.$router.push({ name: 'advertising_edit', params: { id: row.adId, type: 2 } })
    },
    // 上架和下架
    doStatus (row, type) {
      adStatusChange({
        merchantId: this.$store.state.user.merchantId, // 商户id
        adId: row.adId, // 广告id
        adStatus: type, // 状态 0未上架 1已上架 2已下架
        updaterName: this.$store.state.user.userName,
        updater: this.$store.state.user.userId
      })
        .then(res => {
          const result = res.data || {}
          if (result.status === 200) {
            this.$Message.success((type === 1 ? '上架' : '下架') + '成功！')
            this.doSearch()
          } else {
            this.$Message.error(`${result.error}`)
          }
        })
        .catch(err => {
          this.$Message.error(`${err}`)
        })
    },
    // 上移和下移
    doSeqChange (row, type) {
      adSeqChange({
        merchantId: this.$store.state.user.merchantId, // 商户id
        adId: row.adId, // 广告id
        operate: type, // 操作 上移 -1 下移 1
        updaterName: this.$store.state.user.userName,
        updater: this.$store.state.user.userId
      })
        .then(res => {
          const result = res.data || {}
          if (result.status === 200) {
            this.$Message.success((type === 1 ? '下移' : '上移') + '成功！')
            this.doSearch()
          } else {
            this.$Message.error(`${result.error}`)
          }
        })
        .catch(err => {
          this.$Message.error(`${err}`)
        })
    }
  },
  computed: {}
}
</script>
<style lang='less'>
#advertising-rank {
  .search-box {
    .search-item {
      .ivu-date-picker {
        width: 280px;
        .ivu-date-picker-editor {
          width: 280px;
        }
      }
    }
  }
}
</style>
